<script type="text/javascript">
    function upImg(id) {
        layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#'+id //绑定元素
                ,url: '{:url("File/upload")}' //上传接口
                ,accept: 'images' //只允许上传图片
                ,acceptMime: 'image/*' //只筛选图片
                ,before: function(obj){
                    layer.load();
                }
                ,done: function(res){
                    if(res.code){
                        $("#"+id+"_url").attr("src",res.data.url);
                        $("#"+id+"_input").val(res.data.url);
                    }else{
                        layer.msg(res.msg,{icon:2,time:1000});
                    }
                    layer.closeAll('loading');
                }
                ,error: function(res){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });
        });
    }
</script>
<div class="layui-fluid">
    <div class="layui-row">
        <form action="" id="form" class="layui-form" method="post">

            {volist name='option' id='vo'}

                {switch $vo['type'] }
                {case input }
                    <div class="layui-form-item">
                        <label for="{$vo.name}" class="layui-form-label">
                            <span class="x-red">*</span>{$vo.title}
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" value="{$vo.value}" id="{$vo.name}" name="{$vo.name}" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            {$vo.remarks}
                        </div>
                    </div>
                {/case}
                {case textarea}
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>{$vo.title}
                        </label>
                        <div class="layui-input-inline">
                            <textarea name="{$vo.name}" placeholder="" class="layui-textarea">{$vo.value}</textarea>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            {$vo.remarks}
                        </div>
                    </div>
                {/case}
                {case select}
                    <div class="layui-form-item">
                        <label for="{$vo.name}" class="layui-form-label">
                            <span class="x-red">*</span>{$vo.title}
                        </label>
                        <div class="layui-input-inline">
                            <select id="{$vo.name}" name="{$vo.name}" lay-filter="{$vo.name}" lay-verify="select">

                            </select>

                            <script>
                                option=`{$vo.params}`;
                                lists=option.split(/[(\r\n)\r\n]+/);

                                if(lists.length>0){
                                    obj=$("#{$vo.name}");
                                    $.each(lists,function (k,v) {
                                        item=v.split('|');
                                        obj.append('<option value="'+item[0]+'">'+item[1]+'</option>');
                                    })
                                }

                                $("#{$vo.name} option[value='{$vo.value}']").attr("selected","selected");
                            </script>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            {$vo.remarks}
                        </div>
                    </div>
                {/case}
                {case radio}
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red"></span>{$vo.title}</label>
                        <div class="layui-input-block" id="{$vo.name}">

                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            {$vo.remarks}
                        </div>
                    </div>

                    <script>
                        option=`{$vo.params}`;
                        names="{$vo.name}";
                        value=`{$vo.value}`;
                        lists=option.split(/[(\r\n)\r\n]+/);

                        if(lists.length>0){
                            obj=$("#{$vo.name}");
                            $.each(lists,function (k,v) {
                                item=v.split('|');
                                check='';
                                if(item[0]==value){
                                    check='checked';
                                }

                                obj.append('<input type="radio" name="'+names+'" value="'+item[0]+'" '+check+' lay-skin="primary" title="'+item[1]+'">');
                            })
                        }
                    </script>
                {/case}
                {case checkbox}
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="x-red"></span>{$vo.title}</label>
                    <div class="layui-input-block" id="{$vo.name}">

                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        {$vo.remarks}
                    </div>
                </div>

                <script>
                    option=`{$vo.params}`;
                    names="{$vo.name}";
                    value=`{$vo.value}`;
                    lists=option.split(/[(\r\n)\r\n]+/);

                    if(lists.length>0){
                        obj=$("#{$vo.name}");
                        $.each(lists,function (k,v) {
                            item=v.split('|');
                            choose=value.split(',');
                            check='';

                            for (i=0;i<choose.length;i++){
                                if(item[0]==choose[i]){
                                    check='checked';
                                    break;
                                }
                            }

                            obj.append('<input type="checkbox" name="'+names+'" value="'+item[0]+'" '+check+' lay-skin="primary" title="'+item[1]+'">');
                        })
                    }
                </script>
                {/case}
                {case imgFile}
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red"></span>{$vo.title}
                    </label>
                    <div class="layui-input-inline">
                        <div class="public-img-box">
                            <img src="{$vo.value|default='/static/admin/images/img.png'}" id="{$vo.name}_url" style="width: 120px; height: 120px" alt="">
                        </div>
                        <button type="button" class="layui-btn" id="{$vo.name}">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="{$vo.name}" id="{$vo.name}_input" value="{$vo.value}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        {$vo.remarks}
                    </div>
                </div>

                <script>
                    upImg('{$vo.name}');
                </script>
                {/case}
                {case text}
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red"></span>{$vo.title}
                    </label>
                    <div class="layui-input-block" >
                        <textarea id="layeditDemo" name="{$vo.name}"></textarea>
                        <script type="text/javascript" src="/static/admin/js/layedit.js"></script>
                        <script>
                            layui.use(['layedit', 'layer', 'jquery'], function () {
                                var $ = layui.jquery;
                                var layedit = layui.layedit;
                                layedit.set({
                                    //暴露layupload参数设置接口 --详细查看layupload参数说明
                                    uploadImage: {
                                        url: '/Attachment/LayUploadFile',
                                        accept: 'image',
                                        acceptMime: 'image/*',
                                        exts: 'jpg|png|gif|bmp|jpeg',
                                        size: '10240'
                                    }
                                    , uploadVideo: {
                                        url: '/Attachment/LayUploadFile',
                                        accept: 'video',
                                        acceptMime: 'video/*',
                                        exts: 'mp4|flv|avi|rm|rmvb',
                                        size: '20480'
                                    }
                                    //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
                                    //传递参数：
                                    //图片： imgpath --图片路径
                                    //视频： filepath --视频路径 imgpath --封面路径
                                    , calldel: {
                                        url: '/Attachment/DeleteFile'
                                    }
                                    //开发者模式 --默认为false
                                    , devmode: true
                                    //插入代码设置
                                    , codeConfig: {
                                        hide: true,  //是否显示编码语言选择框
                                        default: 'javascript' //hide为true时的默认语言格式
                                    }
                                    , tool: [
                                        'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                                        , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
                                        , '|', 'fullScreen'
                                    ]
                                    , height: '300'
                                });
                                var ieditor = layedit.build('layeditDemo');
                            })
                        </script>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        {$vo.remarks}
                    </div>
                </div>

                {/case}
                {/switch}

            {/volist}


            <div class="layui-form-item">
                <label for="ok" class="layui-form-label">
                </label>
                <button id="ok" class="layui-btn layui-btn-lg" lay-filter="add" lay-submit="">
                    确定
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            form.render();

            //自定义验证规则
            form.verify({
                zm: function(value) {
                    if(!new RegExp("^[a-zA-Z0-9_\s·]+$").test(value)){
                        return '只能是字母或数字，字母和下划线开头';
                    }

                    if(!isNaN(value.substr(0,1))){
                        return '只能是字母或数字，字母和下划线开头';
                    }
                },
                select:function (value) {
                    if(value==0){
                        return '请选择';
                    }
                }
            });

            //监听提交
            form.on('submit(add)',
                function(data) {
                    $.ajax({
                        type: "POST",
                        url: "{:url('edit')}",
                        data: data.field,
                        success: function (result) {
                            layer.alert(result.msg, {
                                icon: 6
                            });
                        },
                        error: function(data) {
                            layer.alert(result.msg, {
                                icon: 2
                            });
                        }

                    });
                    return false;
                });

        });


</script>